<template>
  <div class="echarts-container" ref="charts">
    <!--    <h1>数据图例3</h1>-->
  </div>
</template>

<script setup lang="ts">
//@ts-ignore
import * as echarts from 'echarts';
import {onBeforeMount, onBeforeUnmount, onMounted, ref, watch} from "vue";
//获取图形的DOM节点
let mycharts: echarts.ECharts;
let windData = {dir: 1, strength: 0}
let charts = ref();
let updateDataInterval: any = null; // 用于存储定时器引用
let option = {
  title: {
    x: "center",
    top: 0,
    // text: '风速/风向模拟',
    textStyle: {
      fontWeight: 'normal',
      fontSize: 18,
      color: "#333"
    }
  },
  tooltip: {
    show: true,
    backgroundColor: '#fff',
    borderColor: '#f60',
    borderWidth: '1px',
    textStyle: {
      color: '#333'
    },
    formatter: (param: any) => {
      if (param.seriesIndex == 2) {
        return '<em style="color:' + param.color + ';">当前风向:' + param.value + '</em> °'
      }
      if (param.seriesIndex == 3) {
        return '<em style="color:' + param.color + ';">当前风速:' + param.value + '</em> m/s'
      }
    }
  },
  series: [
    {
      name: '',
      type: 'gauge',
      radius: '85%',
      min: 0,
      max: 360,
      startAngle: 90,
      endAngle: 449.9,
      splitNumber: 0,
      axisLine: {
        lineStyle: {
          color: [
            [0.5, '#ccc'],
            [1, '#ccc']
          ],
          width: 4
        }
      },
      axisLabel: {
        show: false
      },
      detail: {
        show: false
      }
    },
    {
      type: 'gauge',
      radius: '90%',
      splitNumber: 1,
      min: 0,
      max: 360,
      startAngle: 90,
      endAngle: 449.9,
      axisLine: {
        show: false,
        lineStyle: {
          width: 2,
          shadowBlur: 0,
          color: [
            [1, '#8f8f8f']
          ]
        }
      },
      axisTick: {
        show: true,
        lineStyle: {
          color: '#8f8f8f',
          width: 1
        },
        length: '-2%',
        splitNumber: 60
      },
      splitLine: {
        show: false,
        length: 12,
        lineStyle: {
          color: '#8f8f8f',
        }
      },
      axisLabel: {
        show: false
      },
      detail: {
        show: false
      }
    },
    {
      name: '',
      type: 'gauge',
      min: 0,
      max: 360,
      center: ['50%', '50%'],
      startAngle: 90,
      endAngle: -269.9999,
      radius: '90%',
      splitNumber: 12,
      axisLine: {
        lineStyle: {
          width: 15,
          shadowBlur: 0,
          color: [
            [0.25, '#DDBD4D'],
            [0.5, '#E43F3D'],
            [0.75, '#7CBB55'],
            [1, '#9CD6CE']
          ]
        }
      },
      axisTick: {
        show: true,
        splitNumber: 1
      },
      splitLine: {
        length: 10,
        lineStyle: {
          width: 2
        }
      },
      axisLabel: {
        formatter: (e: any) => {
          switch (e + "") {
            case "0":
              return "正北";
            case "360":
              return "正北";
            case "180":
              return "正南";
            case "90":
              return "正东";
            case "270":
              return "正西";
            default:
              return e;
          }
        },
        textStyle: {
          fontSize: 16,//刻度字体
          color: '#ffffff',
          fontWeight: ""
        }
      },
      pointer: {
        show: true,
      },
      detail: {
        formatter: (param: any) => {
          let level = '';
          if (param > 0 && param < 90) {
            level = '东北'
          } else if (param > 90 && param < 180) {
            level = '东南'
          } else if (param > 180 && param < 270) {
            level = '西南'
          } else if (param > 270 && param < 360) {
            level = '西北'
          } else if (param == 360) {
            level = '正北'
          } else if (param == 270) {
            level = '正西'
          } else if (param == 90) {
            level = '正东'
          } else if (param == 180) {
            level = '正南'
          }
          return "当前风向:" + level + "(" + param + "°)";
        },
        offsetCenter: [0, 205],
        textStyle: {
          fontSize: 25
        }
      },
      data: [{
        value: 279,
        name: ''
      }]
    },
    {
      name: '风速',
      type: 'gauge',
      center: ['60%', '40%'],
      radius: '30%',
      min: 0,
      max: 60,
      startAngle: 90,
      endAngle: -269.9999,
      splitNumber: 12,
      animation: 0,
      pointer: {
        show: 1,
        length: '60%',
        width: 3
      },
      itemStyle: {
        normal: {
          color: '#00b0b0',
          shadowColor: 'rgba(0, 0, 0, 0.5)',
          shadowBlur: 10,
          shadowOffsetX: 2,
          shadowOffsetY: 2
        }
      },
      axisLine: {
        lineStyle: {
          color: [
            [1, '#337ab7']
          ],
          width: 6
        }
      },
      splitLine: {
        show: 1,
        length: 6,
        lineStyle: {
          width: 1
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: true,
        distance: 1,
        textStyle: {
          color: '#ea2e2e',
          fontWeight: 600
        },
        formatter: (t: any) => {
          switch (t + '') {
            case '10':
              return '10';
            case '20':
              return '20';
            case '30':
              return '30';
            case '40':
              return '40';
            case '50':
              return '50';
            case '60':
              return '60';
          }
        }
      },
      detail: {
        formatter: (param: any) => {
          return "当前风速:" + param + "m/s";
        },
        offsetCenter: [0, 60],
        textStyle: {
          fontSize: 16
        }
      },
      data: [{
        value: 3.2,
        name: ''
      }]
    }]
};


onMounted(() => {
  //初始化echarts实例
  mycharts = echarts.init(charts.value);
  //设置配置项
  updateOption(windData);
})
const updateOption = (wind: { dir: number, strength: number }) => {
  //@ts-ignore
  option.series[2].data[0].value = wind.dir
  //@ts-ignore
  option.series[3].data[0].value = wind.strength
  mycharts.setOption(option);
}

//动画数据
let fakeWindArr = [
  {dir: 230, strength: 1.6},
  {dir: 30, strength: 5.6},
  {dir: 190, strength: 8.6},
  {dir: 50, strength: 10.6},
  {dir: 70, strength: 22.6},
  {dir: 64, strength: 24.6}
]
let count = ref(0)
watch(count, () => {
  if (count.value > fakeWindArr.length - 1) {
    count.value = 0;
  }
  updateOption(fakeWindArr[count.value]);
});

// 获取数据
onBeforeMount(() => {
  updateDataInterval = setInterval(() => {
    count.value++;
  }, 1000); // 每隔1秒更新一次数据
});

// 清理定时器，避免内存泄漏
onBeforeUnmount(() => {
  if (updateDataInterval) {
    clearInterval(updateDataInterval);
    updateDataInterval = null;
  }
});
</script>

<style scoped lang="scss">
.echarts-container {
  height: 100%;
}

</style>